<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card v-loading="loading" element-loading-text="拼命加载中..." class="tree-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织架构" name="first" />
        </el-tabs>
        <!-- 组件 头部 -->
        <!-- 只写root代表传递的root是true -->
        <TreeTools root :node-date="company" @add="addFn" />
        <!-- 树形组件 -->
        <el-tree :data="list" :props="defaultProps" default-expand-all>
          <!-- v-slot='{ data }' 里的data代表当前节点的数据 -->
          <template v-slot="{ data }">
            <!-- 组件 每一项 -->
            <TreeTools :node-date="data" @getDepartments="getDepartments" @add="addFn" @edit="editFn" />
          </template>
        </el-tree>
      </el-card>
      <AddDept ref="add" :visible.sync="visible" :node-date="nodeDate" @getDepartments="getDepartments" />
    </div>
  </div>
</template>

<script>
// 列表数据转换为树状数据
import { ListToTree } from '@/utils/index'
// 获取部门列表
import { getDepartmentList, getDepartmentDetail } from '@/api/departments'
// 引入组件
import TreeTools from './components/TreeTools'
import AddDept from './components/AddDept'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // tabs默认选中
      activeName: 'first',
      list: [],
      // data 中默认 `label` 为节点标签的文字, `children` 为子节点  (可以通过 props 修改默认配置 )
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 根组件的标题
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        // 顶级部门的BUG 在最根级的tree-tools组件中,由于nodeDate属性中没有id，id便是undefined，但是通过undefined进行等值判断是寻找不到对应的根节点的， 所以在传值时，我们将id属性设置为 " "
        id: ''
      },
      loading: false,
      // 控制添加部门的显示和隐藏
      visible: false,
      // 点击添加拿到的当前项
      nodeDate: {}
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取部门列表
    async getDepartments() {
      this.loading = true
      // 获取部门
      const res = await getDepartmentList()
      // console.log(res)
      // 获取name
      this.company.name = res.companyName
      // 获取数据，调用列表数据转换为树状数据
      this.list = ListToTree(res.depts)
      // console.log(this.list)
      this.loading = false
    },
    // 显示添加弹窗，并且把传递过来的当前项保存起来
    addFn(nodeDate) {
      this.visible = true
      this.nodeDate = nodeDate
      // console.log(this.nodeDate)
    },
    // 显示编辑弹窗，并且把传递过来的当前项保存起来
    async editFn(nodeDate) {
      this.visible = true
      this.nodeDate = nodeDate
      // 回显数据,就是要让form有值,找到组件，就可以对组件进行操作,因为双向绑定，直接修改会改变form的值，所以创建一个新的对象，把值展开放进去
      // this.$refs.add.form = { ...nodeDate }
      // 但是为了时效性，发请求拿最新的数据
      this.$refs.add.form = await getDepartmentDetail(nodeDate.id)
    }
  }
}
</script>
<style scoped lang="scss">
.tree-card {
  padding: 30px 140px;
  font-size:14px;
  .box {
    width: 80px;
  }
}
::v-deep{
  .el-tree-node__expand-icon{
    font-size: 18px;
    color: #000;
  }
  .el-tree-node__expand-icon::before{
    content: '\e723';
  }
  .el-tree-node__expand-icon.expanded{
    transform: rotate(0deg);
  }
  .el-tree-node__expand-icon.expanded::before{
    content: '\e722';
  }
  .el-tree-node__expand-icon.is-leaf::before{
    content: '\e7a5';
  }
}

</style>
